<template>
	<view class="box">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" :lineWidth="80" lineColor="#0F53AC" :activeStyle="activeStyle" :scrollable="false"
				:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick" :current="current">
			</u-tabs>
		</u-sticky>
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<view class="main-box" v-for="item in learnList" :key="item.id" @click="handleToInfo(item)">
			<img class="left-image" :src="item.coverImg" alt="">
			<view class="content">
				<view class="title">{{item.name}}</view>
				<view class="type">{{item.courseTypeName}}</view>
				<view class="text">关联培训: {{item.trainName}}</view>
				<view class="text">培训时间: {{item.trainStartTime}}</view>
			</view>
		</view>
		<u-loadmore v-if="total>6" :status="status" :line="true" />

		<view class="empty-data" v-if="learnList.length==0">
			<u-empty mode="data" :marginTop="100"></u-empty>
		</view>
		<view class="bottom-subside" style='height: 22px;'></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				activeStyle: {
					color: '#0F53AC',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				current: 0,
				list: [{
					name: '待学习',
				}, {
					name: '学习中',
				}, {
					name: '已学习',
				}, {
					name: '已逾期',
				}],
				params: {
					pn: 1,
					ps: 6,
					studyStatus: 0, //状态 0、待学习 1学习中 2、已学习 3、已逾期
				},
				pages: 1,
				total: 0,
				learnList: []
			}
		},
		onShow() {
			this.learnList = [];
			this.params.pn = 1;
			this.getList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.learnList = [];
			this.params.pn = 1;
			this.getList();
		},
		methods: {
			getList() {
				uni.$u.http.post(`/train/mobile/study/studyRecordPage`, this.params).then(res => {
					if (res.code == 0) {
						this.learnList = this.learnList.concat(res.data.records)
						this.pages = res.data.pages;
						this.total = res.data.total;
						uni.stopPullDownRefresh()
					}
				}).catch(err => {})
			},
			tabsClick(e) {
				this.current = e.index
				this.params.pn = 1;
				this.params.studyStatus = e.index
				this.learnList = []
				this.getList()
			},
			handleToInfo(item) {
				if (this.current == 0 && item.canStudyFlag == 0) {
					uni.$u.toast("学习暂未开启")
				} else if (this.current == 3) {
					uni.navigateTo({
						url: `/pages/subPackagesC/exam/examerror?type=${1}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/subPackagesC/learning/learninfo?id=${item.courseId}&trainId=${item.trainId}&type=${this.params.studyStatus}&current=${this.current}`
					})
				}
			}
		},
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.main-box {
			padding: 32rpx;
			border-bottom: 2rpx solid #EDEDED;;
			display: flex;

			.left-image {
				min-width: 160rpx;
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
				display: block;
			}

			.content {
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: 100%;
				overflow: hidden;

				.title {
					width: 100%;
					color: #333333;
					font-size: 16px;
					font-weight: 500;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；
				}

				.type {
					// width: 192rpx;
					// height: 44rpx;
					border-radius: 4px;
					background: rgba(166, 166, 166, 0.3);
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 8rpx 24rpx 8rpx 24rpx;
					color: #666666;
					margin: 16rpx 0;
					font-size: 12px;
					font-weight: 400;
				}

				.text {
					color: #8C8C8C;
					margin-bottom: 8rpx;
					font-size: 14px;
					font-weight: 400;
				}
			}
		}
	}
</style>
